<template>
  <div class="example-container">
    <h2>TablePagination 组件使用示例</h2>

    <!-- 基础用法 -->
    <!-- <el-card class="example-card" header="基础用法">
      <TablePagination :data="basicTableData" :columns="basicColumns" :total="basicTotal" :page-size="basicPageSize"
        :current-page-prop="basicCurrentPage" @page-change="handleBasicPageChange" />
    </el-card> -->

    <!-- 带选择和序号的表格 -->
    <el-card class="example-card" header="带选择和序号">
      <TablePagination :data="advancedTableData" :columns="advancedColumns" :total="advancedTotal"
        :page-size="advancedPageSize" :current-page-prop="advancedCurrentPage" :selection="true" :index="true"
        :show-operation="true" :stripe="true" :border="true" @selection-change="handleSelectionChange"
        @page-change="handleAdvancedPageChange">
        <!-- 自定义状态列 -->
        <template #status="{ value }">
          <el-tag :type="getStatusType(value)">
            {{ getStatusText(value) }}
          </el-tag>
        </template>

        <!-- 操作列 -->
        <template #operation="{ row }">
          <el-button size="small" type="primary" @click="editRow(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteRow(row)">删除</el-button>
        </template>
      </TablePagination>
    </el-card>

    <!-- 加载状态示例 -->
    <!-- <el-card class="example-card" header="加载状态">
      <div style="margin-bottom: 16px;">
        <el-button @click="toggleLoading">切换加载状态</el-button>
      </div>
      <TablePagination :data="loadingTableData" :columns="basicColumns" :total="0" :loading="loading"
        :show-pagination="false" />
    </el-card> -->

    <!-- 空数据状态 -->
    <!-- <el-card class="example-card" header="空数据状态">
      <TablePagination :data="[]" :columns="basicColumns" :total="0" :show-pagination="false" />
    </el-card> -->
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import TablePagination from '@/components/tablePagination.vue'
import { ElMessage } from 'element-plus'

// 基础表格数据
const basicTableData = ref([])
const basicColumns = ref([
  { prop: 'name', label: '姓名', width: 120 },
  { prop: 'age', label: '年龄', width: 80, sortable: true },
  { prop: 'email', label: '邮箱', minWidth: 200, showOverflowTooltip: true },
  { prop: 'department', label: '部门', width: 120 }
])
const basicTotal = ref(0)
const basicPageSize = ref(10)
const basicCurrentPage = ref(1)

// 高级表格数据
const advancedTableData = ref([])
const advancedColumns = ref([
  { prop: 'name', label: '姓名', width: 120 },
  { prop: 'age', label: '年龄', width: 80, sortable: true },
  { prop: 'email', label: '邮箱', minWidth: 200, showOverflowTooltip: true },
  { prop: 'department', label: '部门', width: 120 },
  { prop: 'salary', label: '薪资', width: 100, sortable: true, formatter: (row) => `¥${row.salary.toLocaleString()}` },
  { prop: 'status', label: '状态', width: 100, slot: 'status' },
  { prop: 'createTime', label: '创建时间', width: 180, sortable: true }
])
const advancedTotal = ref(0)
const advancedPageSize = ref(5)
const advancedCurrentPage = ref(1)

// 加载状态
const loading = ref(false)
const loadingTableData = ref([])

// 生成模拟数据
const generateMockData = (count = 50) => {
  const departments = ['技术部', '产品部', '市场部', '人事部', '财务部']
  const statuses = [1, 2, 3] // 1: 在职, 2: 离职, 3: 试用期

  return Array.from({ length: count }, (_, index) => ({
    id: index + 1,
    name: `用户${index + 1}`,
    age: Math.floor(Math.random() * 40) + 20,
    email: `user${index + 1}@example.com`,
    department: departments[Math.floor(Math.random() * departments.length)],
    salary: Math.floor(Math.random() * 50000) + 10000,
    status: statuses[Math.floor(Math.random() * statuses.length)],
    createTime: new Date(2023, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1).toLocaleDateString()
  }))
}

// 状态相关方法
const getStatusType = (status) => {
  const types = { 1: 'success', 2: 'danger', 3: 'warning' }
  return types[status] || 'info'
}

const getStatusText = (status) => {
  const texts = { 1: '在职', 2: '离职', 3: '试用期' }
  return texts[status] || '未知'
}

// 事件处理
const handleBasicPageChange = ({ currentPage, pageSize }) => {
  console.log('基础表格分页变化:', { currentPage, pageSize })
  basicCurrentPage.value = currentPage
  basicPageSize.value = pageSize

  // 模拟分页数据加载
  const allData = generateMockData(100)
  const start = (currentPage - 1) * pageSize
  const end = start + pageSize
  basicTableData.value = allData.slice(start, end)
}

const handleAdvancedPageChange = ({ currentPage, pageSize }) => {
  console.log('高级表格分页变化:', { currentPage, pageSize })
  advancedCurrentPage.value = currentPage
  advancedPageSize.value = pageSize

  // 模拟分页数据加载
  const allData = generateMockData(50)
  const start = (currentPage - 1) * pageSize
  const end = start + pageSize
  advancedTableData.value = allData.slice(start, end)
}

const handleSelectionChange = (selection) => {
  console.log('选中的数据:', selection)
  ElMessage.success(`已选中 ${selection.length} 条数据`)
}

const editRow = (row) => {
  ElMessage.info(`编辑用户: ${row.name}`)
}

const deleteRow = (row) => {
  ElMessage.warning(`删除用户: ${row.name}`)
}

const toggleLoading = () => {
  loading.value = !loading.value
  if (loading.value) {
    loadingTableData.value = []
    setTimeout(() => {
      loading.value = false
      loadingTableData.value = generateMockData(10)
    }, 2000)
  } else {
    loadingTableData.value = generateMockData(10)
  }
}

// 初始化数据
onMounted(() => {
  // 初始化基础表格数据
  const allBasicData = generateMockData(100)
  basicTableData.value = allBasicData.slice(0, basicPageSize.value)
  basicTotal.value = allBasicData.length

  // 初始化高级表格数据
  const allAdvancedData = generateMockData(50)
  advancedTableData.value = allAdvancedData.slice(0, advancedPageSize.value)
  advancedTotal.value = allAdvancedData.length

  // 初始化加载表格数据
  loadingTableData.value = generateMockData(10)
})
</script>

<style scoped lang="scss">
.example-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;

  h2 {
    color: var(--el-text-color-primary);
    margin-bottom: 20px;
    text-align: center;
  }

  .example-card {
    margin-bottom: 30px;

    :deep(.el-card__header) {
      background-color: var(--el-fill-color-light);
      font-weight: 600;
    }

    :deep(.el-card__body) {
      padding: 20px;
    }
  }
}
</style>
